<template>
	<view class="shop-info-page" v-if="playerDetail.usertype">
		<!--标题栏-->
		<view class="fixed">
			<bar-title bgColor="bg-shadeTop text-white"
				:isBack="true"
				:isSolid="false"
			>
				<block slot="content"></block>
			</bar-title>
		</view>
		
		<view class="top" :style="[{height: statusBarHeight + navigationBarHeight + 'px'}]">
			<view class="player-bg">
				<image class="bg" :src="playerDetail.headurl" mode="widthFix"></image>
			</view>
		</view>
		
		<view class="player-info" v-if="playerDetail.usertype">
			
			<view class="info-warp">
				<view class="info-loge">
					<image class="logo" :src="playerDetail.headurl" mode="aspectFill"></image>
				</view>
				<view class="info-title">
					<view class="name">
						{{playerDetail.nickname}}
						<image v-if="playerDetail.sex == 1" class="sex" src="/static/img/img_nan.png" mode="widthFix"></image>
						<image v-if="playerDetail.sex == 2" class="sex" src="/static/img/img_nv.png" mode="widthFix"></image>
					</view>
					<view class="city" v-if="playerDetail.city">{{playerDetail.city}}</view>
				</view>
			</view>
			<view class="info-desc">{{playerDetail.autograph}}</view>
			<view class="moudel-fanlist">
				<view class="fanlist-warp">
					<view class="fanlist-item">
						<view class="fanlist-item_num">{{playerDetail.attentNum}}</view>
						<view class="fanlist-item_name">关注</view>
					</view>
					<view class="fanlist-item">
						<view class="fanlist-item_num">{{playerDetail.fansNum}}</view>
						<view class="fanlist-item_name">粉丝</view>
					</view>
					<view class="fanlist-item">
						<view class="fanlist-item_num">{{playerDetail.praiseNum}}</view>
						<view class="fanlist-item_name">喜欢Ta</view>
					</view>
				</view>
			</view>
		</view>
					  
		<view class="nav-list bg-white">
			<view class="nav z">
				<block v-for="(item, index) in navList" :key="index">
					<view class="cu-item"
						:class="index==tabCurrentIndex ? 'select' : ''"
						@tap="tabSelect"
						:data-index="index"
					>
						<view>{{ item.text }}</view>
						<view class="tab-dot bg-black"></view>
					</view>
				</block>
			</view>
		</view>
		
		<!-- 显示区域 -->
		<swiper :current="tabCurrentIndex" 
			class="swiper-box bg-white"
			duration="300" 
			:style="[{height:'calc(100vh - '+ navigationBarHeight + 'px - 90rpx)'},{top: navigationBarHeight + 'px'}]"
			@change="changeTab">
			<swiper-item class="tab-content"  >
				<scroll-view 
					class="list-scroll-content" 
					scroll-y
					@scrolltolower="loadData"
				>	
					<WaterfallsFlow :wfList='communityList' @itemTap="itemTap" />
					
					<!-- 空白页 -->
					<empty v-if="navList[0].loaded === true && navList[0].list.length === 0"></empty>
					<!-- 列表 -->
					<view class="activity-list" v-else>
						<uni-load-more :status="navList[0].loadingType"></uni-load-more>
					</view>
					 
					
					
				</scroll-view>
			</swiper-item>
				
			
			
			<swiper-item class="tab-content"  >
				<scroll-view 
					class="list-scroll-content" 
					scroll-y
					@scrolltolower="loadData"
				>	
					
					<view v-if="navList[1].list.length">
						<view class="flex flex-wrap padding-sm">
							<view class="shadow-warp"
								v-for="(good, gin) of navList[1].list"
								:key="gin"
								:style="{ width: `calc(50% - 30rpx)`,
									margin: `0 15rpx 30rpx`
								}"
							>
								<ViewLeisurely :spu="good"></ViewLeisurely>
							</view>
						</view>
					</view>
					
					<!-- 空白页 -->
					<empty v-if="navList[1].loaded === true && navList[1].list.length === 0"></empty>
					<!-- 列表 -->
					<view class="activity-list" v-else>
						<uni-load-more :status="navList[1].loadingType"></uni-load-more>
					</view>
					 
					
					
				</scroll-view>
			</swiper-item>
			
			<swiper-item class="tab-content"  >
				<scroll-view 
					class="list-scroll-content" 
					scroll-y
					@scrolltolower="loadData"
				>
				
					<!-- 空白页 -->
					<empty v-if="navList[2].loaded === true && navList[2].list.length === 0"></empty>
					
					<!-- 订单列表 -->
					<view class="shopInfo-list" v-else>
						<block v-for="(item, shopindex) of navList[2].list" :key="shopindex">
							<!-- <ViewScenario :activity="item" ></ViewScenario> -->
							<view class="cu-timeline">
								<view class="cu-time">{{gdate.formatTime(fullYear,item.starttime)}}</view>
								<view class="cu-item text-cyan">
									<view class="bg-gray shadow-cyan content">
										<view class="cu-list menu-avatar radius">
											<view class="cu-item">
												<view class="cu-avatar radius lg" 
												:style="'background-image:url('+item.shopimg+');'"></view>
												<view class="content">
													<view class="text-black text-cut">{{item.shopname}}</view>
													<view class="text-gray text-sm text-cut">{{item.shopadress}}</view>
												</view>
											</view>
											<view class="cu-item">
												<view class="cu-avatar radius lg"
												:style="'background-image:url('+item.scenimg+');'"></view>
												<view class="content">
													<view class="text-black">{{item.scenname}}</view>
													<view class="text-gray text-sm text-cut">{{item.scencontext}}</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							
						</block>
						<uni-load-more :status="navList[2].loadingType"></uni-load-more>
					</view>
					 
					
				</scroll-view>
			</swiper-item>
			
			
			
		</swiper>
		
	</view>
</template>

<script module="gdate" lang="wxs">
	function formatTime (fullYear, startdate) {
		var Yy = startdate.substring(0,4)
		if(fullYear - Yy === 0) {
			Yy = ''
		}else{
			Yy += '-'
		}
		var Mm = startdate.substring(4,6) + '-'
		var Dd = startdate.substring(6,8)
		return Yy + Mm + Dd
	}
    module.exports = {
		formatTime: formatTime
    }
</script>
<script>

import empty from "@/components/basics/empty.vue";
import ViewScenario from '@/components/box/ViewScenario.vue';
import ViewLeisurely from '@/components/box/ViewLeisurely.vue';
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
import { User } from '@/models/user.js';
import { Leisurely } from '@/models/leisurely.js';
let user = new User()

export default {
	components: {
		WaterfallsFlow,
		ViewLeisurely,
		ViewScenario,
		uniLoadMore,
		empty
	},
	data() {
		return {
			fullYear: new Date().getFullYear(),
			othername: '',
			playerDetail: {},
			tabCurrentIndex: 0,
			navList: [
				{
					id: 1,
					text: '动态',
					loaded: false,
					loadingType: 'more',
					pagenum: 0,
					list: []
				},
				{
					id: 2,
					text: '闲本',
					loaded: false,
					loadingType: 'more',
					pagenum: 0,
					list: []
				},
				{
					id: 3,
					text: '打卡',
					loaded: false,
					loadingType: 'more',
					pagenum: 0,
					list: []
				}
			],
			
			communityList:[],
			idleList: []
		};
	},
	computed: {
		statusBarHeight(){
			return this.systemInfo.statusBarHeight
		},
		navigationBarHeight(){
			return this.systemInfo.navigationBarHeight;
		},
	},
	onLoad(option) {
		if(option && option.othername) {
			this.othername = option.othername || 'mo80001021'
			this.getPlayerInfo()
			this.loadData('tabChange');
		}
		
	},
	methods: {
		//顶部tab点击
		tabSelect(e) {
			this.tabCurrentIndex = e.currentTarget.dataset.index-0;
		},
		//swiper 切换
		changeTab(e){
			this.tabCurrentIndex = e.target.current -0;
			this.loadData('tabChange');
		},
		itemTap(item){
			console.log(item);
			this.$jumpPages('community', {dyid: item.dyid})
		},
		async loadData(source){
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex -0;
			let navItem = this.navList[index];
			if(source === 'tabChange' && navItem.loaded === true){
				//tab切换只有第一次需要加载数据
				return;
			}
			if(navItem.loadingType === 'loading' && navItem.loadingType === 'noMore'){
				//防止重复加载
				return;
			}
			navItem.loadingType = 'loading';
			
			switch(index) {
				case 0: 
					await this.getPayerDy(navItem)
				break;	
				case 1: 
					await this.getIdleList(navItem)
				break;	
				case 2: 
					await this.getUserClock(navItem)
				break;
			}
			
		}, 
		async getPayerDy(navItem) {
			navItem.pagenum = navItem.pagenum + 1
			let newList = await user.getPayerDy(navItem.pagenum,this.othername)
			navItem.loaded = true
			this.communityList = this.communityList.concat(newList)
			newList.forEach(item => {
				navItem.list.push(item)
			})
			if (!newList.length) {
				navItem.loadingType = 'noMore'
				return
			}
			navItem.loadingType = 'more'
		},
		async getUserClock(navItem) {
			navItem.pagenum = navItem.pagenum + 1
			let newList =await user.getUserClock(navItem.pagenum,this.othername)
			navItem.loaded = true
			newList.forEach(item => {
				navItem.list.push(item)
			})
			if (!newList.length) {
				navItem.loadingType = 'noMore'
				return
			}
			navItem.loadingType = 'more'
		},
		
		async getIdleList(navItem) {
			navItem.pagenum = navItem.pagenum + 1
			let newList = await user.getIdleList(navItem.pagenum, this.othername)
			navItem.loaded = true
			newList.forEach(item => {
				navItem.list.push(item)
			})
			if (!newList.length) {
				navItem.loadingType = 'noMore'
				return
			}
			navItem.loadingType = 'more'
		},
		
		async getPlayerInfo() {
			let playerDetail = await user.getPlayerInfo(this.othername)
			this.playerDetail = playerDetail
		},
		
	}
}
</script>

<style lang="scss" scoped>
.fixed {
	position: fixed;
	z-index: 99;
}
.player-bg{
	height: 563rpx;
	background-color: #F1F1F1;
	overflow: hidden;
	position: relative;
	z-index: 10;
	&::after{
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 12;
		background-color: rgba(0,0,0,0.36);
	}
	.bg{
		width: 100%;
		position: relative;
		z-index: 11;
	}
}
.player-info{
	border-radius: 20rpx 20rpx 0 0;
	position: relative;
	z-index: 13;
	min-height: 312rpx;
	.info-loge{
		width: 148rpx;
		height: 148rpx;
		border-radius: 50%;
		border: 4rpx solid #e1e1e1;
	}
	.logo{
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}
	.info-warp{
		display: flex;
		margin: 22rpx 40rpx 0;
	}
	.info-title{
		color: #333333;
		font-size: 32rpx;
		line-height: 44rpx;
		text-align: left;
		vertical-align: middle;
		margin-left: 24rpx;
		width: 0;
		flex: 1;
		.name{
			padding-top: 20rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
		}
		.sex{
			width: 28rpx;
			height: 28rpx;
			margin-left: 10rpx;
		}
		.city {
			display: inline-block;
			background-color: #2ebac2;
			font-size: 24rpx;
			padding: 4rpx 16rpx;
			border-radius: 20rpx;
			color: #fff;
		}
	}
	.info-desc{
		min-height: 68rpx;
		margin: 32rpx;
		font-size: 26rpx;
		line-height: 36rpx;
		color: #FFFFFF;
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2;
	}
}

.moudel-fanlist {
    position: relative;
    z-index: 21;
    padding: 32rpx 0 24rpx;
	color: #FFFFFF;
	.fanlist-warp {
	    display: flex;
	    list-style: none;
	}
	.fanlist-item {
	    flex: 1;
	    text-align: center;
	}
	.fanlist-item_num {
	    font-size: 36rpx;
	    font-weight: 700;
	}
	.fanlist-item_name {
	    font-size: 22rpx;
	}
}
.nav-list{
	background-color: #FFFFFF;
	text-align: center;
	position: relative;
	z-index: 20;
	border-radius: 20rpx 20rpx 0 0;
	.nav{
		position: sticky;
		top: 0;
		.cu-item{
			color: #999999;
			font-size: 32rpx;
			position: relative;
		}
		.select{
			color: #333333;
			font-size: 36rpx;
			&::after{
				content: '';
				position: absolute;
				height: 6rpx;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #333333;
				border-radius: 6rpx;
			}
		}
	}
}
.list-scroll-content{
	height: 100%;
}
.cu-list.menu-avatar>.cu-item{
	.content {
	    position: absolute;
	    left: 146rpx;
	    width: calc(100% - 96rpx - 60rpx - 20rpx);
	    line-height: 1.6em;
	}
} 
</style>